<template>
  <div class="xinchou-detail-container">
    <div class="salary-dashboard">
      <!-- 返回按钮 -->
      <div class="back-button" v-if="isDetailPage">
        <a-button @click="goBack" type="primary" ghost>
          <template #icon><ArrowLeftOutlined /></template>
          返回列表
        </a-button>
      </div>

      <!-- 主体内容区域 -->
      <div class="main-content">
        <!-- 用户信息卡片 -->
        <a-card class="user-card">
          <div class="user-header">
            <a-avatar :size="80" :src="salaryDetail.user?.avatar_url || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
            <div class="user-info">
              <div class="name">{{ salaryDetail.user?.full_name || '匿名用户' }}</div>
              <div class="position">{{ salaryDetail.level?.typical_title || salaryDetail.department }}</div>
              <a-tag class="level-tag">职级 {{ salaryDetail.level?.level_code }}</a-tag>
            </div>
          </div>
          
          <div class="user-details">
            <a-descriptions :column="1" bordered size="small">
              <a-descriptions-item label="公司">
                <OfficeBuildingOutlined /> {{ salaryDetail.company?.name }}
              </a-descriptions-item>
              <a-descriptions-item label="地点">
                <EnvironmentOutlined /> {{ salaryDetail.location }}，{{ salaryDetail.country }}
              </a-descriptions-item>
              <a-descriptions-item label="工时" v-if="salaryDetail.hour_per_week > 0">
                <ClockCircleOutlined /> {{ salaryDetail.hour_per_week }}小时/周
              </a-descriptions-item>
              <a-descriptions-item label="学历" v-if="salaryDetail.degree">
                <ReadOutlined /> {{ salaryDetail.degree }}
              </a-descriptions-item>
              <a-descriptions-item label="工作时长">
                <FieldTimeOutlined /> {{ Math.floor(salaryDetail.year_in_company) }}年在公司
              </a-descriptions-item>
            </a-descriptions>
            
            <div class="work-duration">
              <div class="duration-item">
                <div class="duration-title">总工作年数</div>
                <div class="duration-value">{{ Math.floor(salaryDetail.year_of_experience) || '未知' }}年</div>
              </div>
              <div class="duration-item">
                <div class="duration-title">在此公司工作年数</div>
                <div class="duration-value">{{ Math.floor(salaryDetail.year_in_company) }}年</div>
              </div>
            </div>
          </div>
        </a-card>
        
        <!-- 薪酬信息区域 -->
        <div class="salary-section">
          <div class="total-salary">
            <div class="title">总薪酬</div>
            <div class="value" v-if="salaryDetail.total_comp > 0">￥{{ (salaryDetail.total_comp / 10000).toFixed(1) }}万{{ salaryDetail.currency_code }}</div>
            <div class="value" v-else>面议</div>
            <a-tooltip title="包含年薪、奖金和股权激励">
              <ExclamationCircleOutlined />
            </a-tooltip>
          </div>
          
          <div class="salary-breakdown">
            <a-row :gutter="20">
              <a-col :span="6">
                <a-card hoverable>
                  <div class="salary-card-title">工资/月</div>
                  <div class="salary-card-value" v-if="salaryDetail.base_monthly_comp > 0">￥{{ (salaryDetail.base_monthly_comp / 10000).toFixed(1) }}万</div>
                  <div class="salary-card-value" v-else>面议</div>
                  <div class="salary-card-meta">{{ salaryDetail.base_monthly_comp_multiplier }}薪</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <div class="salary-card-title">基本工资</div>
                  <div class="salary-card-value" v-if="salaryDetail.base_comp > 0">￥{{ (salaryDetail.base_comp / 10000).toFixed(1) }}万{{ salaryDetail.currency_code }}</div>
                  <div class="salary-card-value" v-else>面议</div>
                  <div class="salary-card-meta">年基本工资</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <div class="salary-card-title">奖金</div>
                  <div class="salary-card-value" v-if="salaryDetail.bonus_comp > 0">￥{{ (salaryDetail.bonus_comp / 10000).toFixed(1) }}万{{ salaryDetail.currency_code }}</div>
                  <div class="salary-card-value" v-else>面议</div>
                  <div class="salary-card-meta">{{ salaryDetail.bonus_comp_multiplier }}薪</div>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card hoverable>
                  <div class="salary-card-title">股权激励/年</div>
                  <div class="salary-card-value" v-if="salaryDetail.stock_comp > 0">￥{{ (salaryDetail.stock_comp / 10000).toFixed(1) }}万{{ salaryDetail.currency_code }}</div>
                  <div class="salary-card-value" v-else>￥0.0万{{ salaryDetail.currency_code }}</div>
                  <div class="salary-card-meta" v-if="salaryDetail.annual_stock_num > 0">约{{ salaryDetail.annual_stock_num }}股</div>
                  <div class="salary-card-meta" v-else>价值预估</div>
                </a-card>
              </a-col>
            </a-row>
          </div>
          
          <!-- 技能标签区域 -->
          <div class="skills-section" v-if="(salaryDetail.tech_stacks?.length > 0 || salaryDetail.focuses?.length > 0) && isDetailPage">
            <div class="section-title">技术栈</div>
            <div class="tags-container">
              <a-tag 
                v-for="(tech, index) in salaryDetail.tech_stacks" 
                :key="index" 
                class="tech-tag"
              >
                {{ tech }}
              </a-tag>
              <a-tag 
                v-for="(focus, index) in salaryDetail.focuses" 
                :key="index" 
                color="blue"
                class="tech-tag"
              >
                {{ focus }}
              </a-tag>
            </div>
            
            <div class="section-title">工作方向</div>
            <div class="tags-container">
              <a-tag color="green" class="skill-tag">{{ salaryDetail.level?.typical_title || salaryDetail.department }}</a-tag>
              <a-tag color="green" class="skill-tag">{{ salaryDetail.level?.level_name }}</a-tag>
            </div>
          </div>
        </div>
        
        <!-- 薪酬分布图表 -->
        <SalaryDistributionChart v-if="isDetailPage" :userSalary="(salaryDetail.total_comp || 0) / 10000" />
      </div>
      
        <!-- 论坛区域 -->
      <div class="main-luntan" v-if="isDetailPage">
        <iframe 
          :src="`http://192.168.3.86:8100/d/${salaryDetail.flarum_post_id || ''}`" 
          width="100%" 
          height="800px" 
          frameborder="0"
          allow="fullscreen"
        ></iframe>
      </div>

      <!-- 错误提示 -->
      <div v-if="error" class="error">
        <a-alert
          :message="error"
          type="error"
          show-icon
        />
        <div style="margin-top: 20px;">
          <a-button @click="goBack" type="primary">返回列表</a-button>
        </div>
      </div>
      
    
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import {
  OfficeBuildingOutlined,
  EnvironmentOutlined,
  ClockCircleOutlined,
  ReadOutlined,
  FieldTimeOutlined,
  ExclamationCircleOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons-vue';
import SalaryDistributionChart from '../components/SalaryDistributionChart.vue';
import { SalariesdataApi } from '../utils/api';

// 路由相关
const router = useRouter();

// 通过props接收id
const props = defineProps({
  id: {
    type: String,
    default: null
  }
});

// 判断是否为详情页
const isDetailPage = computed(() => !!props.id);

// 薪酬详情数据
const salaryDetail = ref({
  title: '',
  department: '',
  tech_stacks: [],
  focuses: [],
  hire_type: '',
  country: '',
  location: '',
  hour_per_week: 0,
  base_comp: 0,
  base_monthly_comp: 0,
  base_monthly_comp_multiplier: 0,
  bonus_comp: 0,
  bonus_comp_multiplier: 0,
  stock_comp: 0,
  annual_stock_num: 0,
  total_comp: 0,
  year_in_company: 0,
  year_of_experience: 0,
  degree: '',
  bachelor_school: '',
  advanced_school: '',
  currency_code: 'CNY',
  is_approved: false,
  accuracy_upvote: 0,
  id: '',
  company_id: '',
  level_id: '',
  user_id: '',
  flarum_post_id: null,
  created_at: '',
  company: {
    name: '',
    industry: '',
    country: '',
    description: '',
    logo_url: '',
    website: '',
    flarum_tag_id: 0,
    id: '',
    flarum_tag_url: null
  },
  level: {
    level_name: '',
    level_code: '',
    description: '',
    min_yoe: 0,
    max_yoe: 0,
    typical_title: '',
    id: '',
    company_id: ''
  },
  user: {
    email: '',
    is_active: true,
    is_superuser: false,
    full_name: '',
    id: '',
    avatar_url: null,
    year_of_experience: null,
    current_title: null
  }
});

// 加载状态
const loading = ref(false);
const error = ref(null);

// 获取薪酬详情
const fetchSalaryDetail = async (id) => {
  try {
    loading.value = true;
    error.value = null;
    
    const response = await SalariesdataApi.getSalaryDetail(id);
    salaryDetail.value = response;
    console.log(111111,salaryDetail.value)
  } catch (err) {
    console.error('获取薪酬详情失败:', err);
    error.value = '获取薪酬详情失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  if (isDetailPage.value) {
    router.push('/salarieslist');
  } else {
    router.go(-1);
  }
};

// 监听路由参数变化
watch(
  () => props.id,
  (newId) => {
    if (newId) {
      fetchSalaryDetail(newId);
    }
  },
  { immediate: true }
);

</script>

<style scoped>
.xinchou-detail-container{
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.salary-dashboard {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  min-height: 100vh;
  color: #333;
  padding-bottom: 20px;
  width: 100%;
  max-width: 1200px;
}

.back-button {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
}

.user-card {
  border-radius: 8px;
}

.user-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.user-info {
  margin-left: 16px;
}

.user-info .name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-info .position {
  color: #606266;
  margin-bottom: 8px;
}

.level-tag {
  font-size: 12px;
}

.user-details {
  margin-top: 20px;
}

.work-duration {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  padding: 15px 0;
  background-color: #f9f9f9;
  border-radius: 6px;
}

.duration-item {
  text-align: center;
}

.duration-title {
  font-size: 14px;
  color: #909399;
}

.duration-value {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
}

.salary-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.total-salary {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.total-salary .title {
  font-size: 16px;
  margin-right: 10px;
}

.total-salary .value {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b6b;
  margin-right: 10px;
}

.salary-breakdown :deep(.ant-row) {
  flex-wrap: wrap;
}

.salary-breakdown :deep(.ant-col) {
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 15px;
}

.salary-card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.salary-card-value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #409eff;
}

.salary-card-meta {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

.skills-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.skill-tag {
  border-radius: 12px;
  padding: 4px 15px;
}

.tech-tag {
  border-radius: 12px;
  padding: 4px 15px;
}

.main-luntan {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
  overflow: hidden;
}

.main-luntan iframe {
  border: none;
  width: 100%;
  height: 800px;
  /* 裁剪掉顶部50px的内容（通常是导航栏高度） */
  margin-top: -355px;
}

.error {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 20px;
}

/* 平板及以下设备 */
@media (max-width: 768px) {
  .salary-breakdown :deep(.ant-col) {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .work-duration {
    flex-direction: column;
    gap: 15px;
  }
  
  .main-content {
    padding: 0 10px;
  }
}
</style>